<template>
    <div class="service-list">

        <div class="cateTab">
            <div class="cateTab-list">
                <div class="cateTab-type-title">需求状态：</div>
                <div class="cateTab-type-item" :class="{
                    'cateTab-type-item-active': selectStatus == null,
                }" @click="clickStatus(null)">
                    全部
                </div>
                <div class="cateTab-type-item" :class="{ 'cateTab-type-item-active': selectStatus == '0' }"
                    @click="clickStatus('0')">
                    可参与
                </div>
                <div class="cateTab-type-item" :class="{ 'cateTab-type-item-active': selectStatus == '1' }"
                    @click="clickStatus('1')">
                    已中标
                </div>
            </div>
            <div class="cateTab-list">
                <div class="cateTab-type-title">发布时间：</div>
                <div class="cateTab-type-item" :class="{ 'cateTab-type-item-active': selectTime == '0' }"
                    @click="clickTime('0')">
                    全部
                </div>
                <div class="cateTab-type-item" :class="{ 'cateTab-type-item-active': selectTime == '1' }"
                    @click="clickTime('1')">
                    今日
                </div>
                <div class="cateTab-type-item" :class="{ 'cateTab-type-item-active': selectTime == '3' }"
                    @click="clickTime('3')">
                    最近三天
                </div>
                <div class="cateTab-type-item" :class="{ 'cateTab-type-item-active': selectTime == '7' }"
                    @click="clickTime('7')">
                    最近一周
                </div>
                <div class="cateTab-type-item" :class="{ 'cateTab-type-item-active': selectTime == '30' }"
                    @click="clickTime('30')">
                    最近一个月
                </div>
            </div>
            <!-- <div class="cateTab-list" style="margin-bottom: 0">
                <div class="cateTab-type-title" style="margin-right: 0">
                    擅长服务：
                </div>
                <div
                    class="cateTab-type-item2"
                    :class="{
                        'cateTab-type-item-active2': selectIndex == null,
                    }"
                    @click="selectCate(null)"
                >
                    全部
                </div>
                <div
                    v-for="(item, index) in allCate"
                    :key="index"
                    class="cateTab-type-item2"
                    :class="{
                        'cateTab-type-item-active2': selectIndex == index,
                    }"
                    @click="selectCate(index)"
                >
                    <span>
                        {{
                            selectIndex == index && selectCateThird_name
                                ? selectCateThird_name
                                : item.name
                        }}
                    </span>
                    <i class="el-icon-arrow-down"></i>
                </div>
            </div>
            <div v-if="twoCate.length > 0" class="cateTab-list">
                <div class="cateTab-type-title" style="margin-right: 0"></div>
                <div class="cateTab-type-3">
                    <div
                        v-for="(items, indexs) in twoCate"
                        :key="indexs"
                        class="cateTab-3-list"
                        :class="{ active: selectCateTwo == items.id }"
                        @click="clickCateTwo(items)"
                    >
                        <div class="cateTab-3-list-name">{{ items.name }}</div>
                        <div class="cateTab-3-list-third">
                            <div
                                v-for="(item, index) in items.third"
                                :key="index"
                                :class="{ active: selectCateThird == item.id }"
                                @click="clickCateThird(item)"
                            >
                                {{ item.name }}
                            </div>
                        </div>
                    </div>
                </div>
            </div> -->
            <div class="cateTab-list" :style="{ marginBottom: selectIndex != null ? 0 : '', }">
                <div class="cateTab-type-title" style="margin-right: 0">
                    擅长服务：
                </div>
                <div class="cateTab-type-item2" :class="{
                    'cateTab-type-item-active2': selectIndex == null,
                }" @click="selectCate(null)">
                    全部
                </div>
                <div v-for="(item, index) in allCate" :key="index" class="cateTab-type-item2" :class="{
                    'cateTab-type-item-active2': selectIndex == index,
                }" @click="selectCate(index)">
                    {{ item.name }}
                    <i :class="selectIndex == index && isGL ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
                </div>
            </div>
            <div class="cateTab-list ">
                <div class="cateTab-type-title" style="margin-right: 0"></div>
                <div class="cateTab-type-3 cateTab-list-transition"
                    :style="{ height: twoCate.length > 0 && isGL ? selectIndex == 2 ? '79px' : '53px' : 0, padding: twoCate.length > 0 && isGL ? '10px 0 17px' : 0 }">
                    <span v-for="(item, index) in twoCate" :key="index" :class="{ active: selectCateTwo == item.id }"
                        @click="clickCateTwo(item)">{{ item.name
                        }}</span>
                </div>
            </div>
            <div class="cateTab-list">
                <div class="cateTab-type-title">需求所在地：</div>
                <div v-for="item in hotCity" :key="item.name" class="cateTab-type-item" :class="{
                    'cateTab-type-item-active': citySelect == item.id,
                }" @click="cityClick(item)">
                    {{ item.name }}
                </div>

                <el-popover placement="bottom" width="244" trigger="click">
                    <el-cascader ref="citySelect" class="cate-tab-select" v-model="address" :options="region" :props="{
                        value: 'id',
                        label: 'name',
                        children: 'children',
                    }" clearable filterable @change="cityChange"></el-cascader>
                    <div slot="reference" class="cateTab-type-item" :class="{
                        'cateTab-type-item-active': selectAddress != '更多',
                    }">
                        {{ selectAddress }}
                        <i class="el-icon-arrow-down"></i>
                    </div>
                </el-popover>
            </div>
        </div>

        <div v-if="userInfo && userInfo.is_gpt_vip == 0" class="shaixuan">
            <!--  <div class="range">
              <span style="padding-right: 16px;">价格:</span>
                <el-input-number v-model="num" :controls="false" :min="0"></el-input-number>
                <span style="padding: 0 4px;">-</span>
                <el-input-number v-model="num" :controls="false" :min="0"></el-input-number>
                <el-button type="primary" class="button">确定</el-button> 
            </div>-->
            <el-checkbox v-model="is_look" true-label="1" false-label="0" @change="is_look_change">已解锁的需求</el-checkbox>
        </div>

        <div class="con" v-loading="dataLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading">
            <div v-if="dataList.length > 0" class="demand-list">
                <div v-for="(item, index) in dataList" :key="index" class="demand-list-item">
                    <div class="left">
                        <div class="top ellipsis" @click="goDetail(item)">
                            <span>￥{{ item.money }}</span>
                            {{ item.name ? item.name : item.two_cate_name }}
                        </div>
                        <div class="bottom">
                            服务类型：{{ item.one_cate_name }}/{{ item.two_cate_name }}
                            <span>需求状态：{{ getStatus(item.status) }}</span>
                        </div>
                    </div>
                    <div class="right">
                        <div class="top">
                            <span>{{ item.join_number }}</span>人投标
                        </div>
                        截止时间：{{ getTime2(item.end_time * 1000) }}
                    </div>
                    <div class="button" @click="goDetail(item)">
                        查看详情
                    </div>
                </div>
            </div>
            <div v-if="dataList.length > 0" style="text-align: center; margin-top: 30px">
                <el-pagination background layout="prev, pager, next" :total="total" :page-size="limit"
                    :current-page.sync="page" @current-change="changePage">
                </el-pagination>
            </div>
            <div v-if="dataList.length == 0" class="empty">
                <el-empty description="暂无需求"></el-empty>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";

import { getallcate, getDemandList } from "@/assets/api/service";
import { getServiceType, goTopSmooth, getTime2 } from "@/assets/utils/utils";
import region from "@/assets/json/region-just-city.json";

export default {
    components: {},
    head() {
        return {
            title: "需求大厅-【小竹财税平台】",
            meta: [
                {
                    hid: "keywords",
                    name: "keywords",
                    content: "小竹财税,服务商,小竹企服,需求大厅",
                },
            ],
        };
    },
    layout: "serverHome",
    data() {
        return {
            num: 0,
            checked: false,
            dataList: [], //需求列表
            //列表页数
            total: "",
            limit: 9,
            page: 1,
            getServiceType: getServiceType,
            is_look: '0',

            getTime2: getTime2,

            getStatus: function (status) {
                switch (status) {
                    case 0:
                        return '可参与';
                    case 1:
                        return '已中标';
                    case 2:
                        return '已取消';
                }
            },

            // 热门城市
            hotCity: [
                {
                    name: "全国",
                    id: null,
                },
                {
                    name: "合肥",
                    id: "340100",
                },
                {
                    name: "北京",
                    id: "110100",
                },
                {
                    name: "上海",
                    id: "310100",
                },
                {
                    name: "深圳",
                    id: "440300",
                },
                {
                    name: "广州",
                    id: "440100",
                },
                {
                    name: "杭州",
                    id: "330100",
                },
            ],

            region: [],
            address: "",
            selectAddress: "更多",
            citySelect: null,
            selectStatus: null,

            allCate: [], //服务类目
            selectIndex: null, //一级分类index
            twoCate: [], //二级分类数据
            selectCateOne: "", //一级分类的Id
            selectCateTwo: "", //二级分类的Id
            selectCateThird: "", //三级分类的Id
            selectCateThird_name: "",
            sort: 0,

            // 选择的发布时间
            selectTime: "0",

            dataLoading: false, //加载中

            keyword: '',

            isGL: true
        };
    },
    beforeDestroy() { },
    beforeMount() { },
    mounted() {
        goTopSmooth();
        this.init();
    },
    computed: {
        ...mapState("common", {
            userInfo: (state) => state.userInfo,
        }),
    },
    watch: {
        '$route.query.keyword'(n, o) {
            this.keyword = n
            this.getList();
        }
    },
    methods: {
        init() {
            let regionList = region;
            for (let items of regionList) {
                for (let item of items.children) {
                    delete item.children;
                }
            }
            this.region = regionList;
            this.getallcate();
            this.getList();
        },

        //获取全部服务商分类
        async getallcate() {
            const res = await getallcate({});
            if (res.code == 1) {
                this.allCate = res.data;
            }
        },
        // 分页操作
        changePage(page) {
            this.page = page;
            this.getList();
        },

        // 获取列表
        async getList() {
            this.dataLoading = true;
            let params = {
                sort: this.sort,
                page: this.page,
                pagesize: this.limit,
                keyword: this.$route.query.keyword,
                is_look: this.is_look
            };
            if (this.selectAddress != "更多") {
                params.city_code = this.address[1];
            } else if (this.citySelect) {
                params.city_code = this.citySelect;
            }
            if (this.selectStatus) {
                params.status = this.selectStatus;
            }
            if (this.selectTime) {
                params.time_type = this.selectTime;
            }
            if (this.selectCateThird || this.selectCateTwo) {
                params.one_cate_id = this.selectCateOne;
                params.two_cate_id = this.selectCateTwo;
                params.third_cate_id = this.selectCateThird;
            }
            const res = await getDemandList(params);
            if (res.code == 1) {
                this.dataList = res.data.data;
                this.total = res.data.demandcount;
                this.dataLoading = false;
            }
        },
        // 选择一级分类
        selectCate(index) {

            if (index != null) {
                this.twoCate = this.allCate[index].two;
                if (this.selectIndex == index) this.isGL = !this.isGL
                else this.isGL = true
            } else {

                this.selectCateOne = "";
                this.selectCateTwo = "";
                this.selectCateThird = "";
                this.selectCateThird_name = "";
                this.getList();
                this.twoCate = [];
            }
            this.selectIndex = index;

        },

        // 选择二级分类
        clickCateTwo(item) {
            if (this.selectCateTwo == item.id) return;
            this.selectCateTwo = item.id;
            this.getList();

        },

        //选择三级分类
        clickCateThird(val) {
            console.log(val, "三级分类的参数");
            if (this.selectCateThird == val.id) return;
            this.selectCateThird = val.id;
            this.selectCateThird_name = val.name;
            this.selectCateTwo = val.s_id;
            this.selectCateOne = val.c_id;
            this.twoCate = [];
            this.getList();
        },

        // 筛选解锁
        is_look_change() {
            this.getList();
        },

        cityChange(citys) {
            let label = "";
            for (let items of this.region) {
                if (items.id == citys[0]) {
                    for (let item of items.children) {
                        if (item.id == citys[1]) {
                            label = item.name;
                        }
                    }
                }
            }

            if (!label || this.selectAddress == label) return;
            this.citySelect = "";
            this.selectAddress = label;
            this.getList();
        },

        cityClick(item) {
            if (this.citySelect == item.id) return;
            this.address = ''
            this.selectAddress = "更多";
            this.citySelect = item.id;
            this.getList();
        },

        // 选择服务商类型
        clickStatus(type) {
            if (this.selectStatus == type) return;
            this.selectStatus = type;
            this.getList();
        },

        // 选择发布时间
        clickTime(time) {
            if (this.selectTime == time) return;
            this.selectTime = time;
            this.getList();
        },

        clickTab(index) {
            if (this.sort == index) return;
            this.sort = index;
            this.getList();
        },

        goDetail(item) {
            // if (item.status != 0) {
            //     return
            // }
            // this.$router.push({
            //     path: "/service/demanddetail",
            //     query: {
            //         id: item.id,
            //     },
            // });
            window.open(this.$router.resolve({
                path: "/service/demanddetail",
                query: {
                    id: item.id,
                },
            }).href, '_blank');
        },
    },
};
</script>

<style lang="scss" scoped>
.service-list {
    position: relative;
    padding-top: 50px;
    overflow: hidden;
}

.service-bj {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
}

.cateTab {
    position: relative;
    z-index: 1;
    width: 1200px;
    margin: 20px auto;
    margin-top: 0;
    background-color: #fff;
    padding: 14px 15px;
    box-sizing: border-box;
}

.cateTab-list-transition {
    transition: all 0.3s;
    overflow: hidden;
}

.cateTab-list {
    display: flex;
    align-items: center;
    margin-bottom: 10px;

    .cateTab-type-title {
        width: 100px;
        min-width: 100px;
        font-size: 14px;
        color: #020C17;
        text-align: right;
        // margin-right: 14px;
    }

    .cateTab-type-item {
        // height: 28px;
        // line-height: 28px;
        // padding: 0 10px;
        // border-radius: 3px;
        font-size: 14px;
        color: #020C17;
        text-align: center;
        // margin-right: 28px;
        padding: 0 14px;
        cursor: pointer;
        height: 28px;
        line-height: 28px;
        &:hover{
            color: #1B8DFF;
            opacity: 0.85;
        }
    }

    .cateTab-type-item-active {
        background: rgba(27, 141, 255, 0.12);
        color: #1B8DFF;
    }

    .cateTab-type-item2 {
        height: 28px;
        line-height: 28px;
        padding: 0 14px;
        font-size: 14px;
        color: #020C17;
        text-align: center;
        display: flex;
        align-items: center;
        cursor: pointer;

        &:hover {
            opacity: 0.85;
            color: #1B8DFF;
        }

        span {
            white-space: nowrap;
            /* 禁止换行 */
            overflow: hidden;
            /* 隐藏溢出内容 */
            text-overflow: ellipsis;
            /* 显示省略号 */
            width: 68px;
            display: block;
        }

        i {
            font-size: 14px;
            padding-left: 2px;
        }
    }

    .cateTab-type-item-active2 {
        background: rgba(27, 141, 255, 0.12);
        // background: burlywood;
        color: #1B8DFF;
    }

    // .cateTab-type-3 {
    //     background: #f9f9f9;
    //     // background: burlywood;
    //     padding: 7px 20px;
    //     // display: flex;
    //     // align-items: center;
    //     // flex-wrap: wrap;
    //     width: 100%;

    //     div {
    //         font-size: 14px;
    //         color: #666666;
    //         cursor: pointer;
    //     }

    //     .cateTab-3-list {
    //         padding: 5px 0;
    //         display: flex;

    //         .cateTab-3-list-name {
    //             min-width: 120px;
    //             line-height: 22px;
    //         }

    //         .cateTab-3-list-third {
    //             display: flex;
    //             flex-wrap: wrap;

    //             div {
    //                 margin-right: 10px;
    //                 line-height: 22px;
    //             }
    //         }
    //     }

    //     .active {
    //         color: #ff6900;
    //     }
    // }

    .cateTab-type-3 {
        background: rgba(27, 141, 255, 0.12);
        padding: 10px 0 17px;
        padding-left: 20px !important;
        padding-right: 20px !important;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        width: 100%;

        span {
            font-size: 14px;
            color: #666666;
            margin-right: 34px;
            display: block;
            cursor: pointer;
            padding-top: 7px;

            &:hover {
                color: #1B8DFF;
            }
        }

        .active {
            color: #1B8DFF;
        }
    }
}

.shaixuan {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 1200px;
    height: 42px;
    background: #FFFFFF;
    border-radius: 10px;
    position: relative;
    z-index: 10;
    margin: 0 auto 20px;
    padding: 0 20px;

    .range {
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #020C17;

        &::v-deep .el-input__inner,
        .el-input-number {
            width: 75px;
            height: 25px;
            line-height: 25px;
            text-align: left;
        }

        &::v-deep .el-input__inner {
            padding-left: 5px;
            padding-right: 5px;
        }


        .button {
            width: 54px;
            height: 25px;
            padding: 0;
            margin-left: 20px;
        }
    }
}

.con {
    width: 1200px;
    margin: 0 auto 30px;
    position: relative;
    z-index: 1;
}

.empty {
    margin: 0 6px 16px 6px;
    border-radius: 4px;
    background-color: #ffffff;
}

.demand-list {
    width: 1200px;
    margin: 0 auto;
}

.demand-list-item {
    width: 100%;
    height: 91px;
    background: #FFFFFF;
    border-radius: 10px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 20px;
    padding-right: 259px;
    position: relative;

    &:hover {
        background-color: #F5FAFF;
    }

    .button {
        position: absolute;
        top: 29px;
        right: 20px;
        width: 120px;
        height: 36px;
        line-height: 33px;
        text-align: center;
        background: rgba(0, 142, 255, 0.1);
        border-radius: 10px;
        border: 2px solid #008EFF;
        font-size: 18px;
        color: #008EFF;
        cursor: pointer;
        user-select: none;
        transition: all 0.2s;

        &:active {
            opacity: 0.85;
        }

        &:hover {
            background-color: #008EFF;
            color: #ffffff;
        }
    }

    .left {
        .top {
            font-weight: 600;
            font-size: 18px;
            color: #020C17;
            margin-bottom: 12px;
            width: 650px;
            cursor: pointer;

            &:hover {
                color: #008EFF;
            }

            span {
                color: #FF6900 !important;
                padding-right: 19px;
            }
        }

        .bottom {
            font-size: 16px;
            color: #525355;

            span {
                padding-left: 50px;
            }
        }
    }

    .right {
        font-size: 16px;
        color: #525355;
        text-align: right;

        .top {
            margin-bottom: 12px;

            span {
                color: #1B8DFF;
            }
        }
    }
}
</style>